<template>
    <div class="rating-select">
        <!-- 评论类型 -->
        <div class="rating-type border-bottom-1px">
            <!-- 全部 -->
            <span @click="select(2)" class="block positive" :class="{'active': selectType === 2}">
                {{desc.all}}
                <span class="count">{{ratings.length}}</span>
            </span>
            <!-- 好评 -->
            <span @click="select(0)" class="block positive" :class="{'active': selectType === 0}">
                {{desc.positive}}
                <span class="count">{{positives.length}}</span>
            </span>
            <!-- 差评 -->
            <span @click="select(1)" class="block negative" :class="{'active': selectType === 1}">
                {{desc.negative}}
                <span class="count">{{negatives.length}}</span>
            </span>
        </div>
        <!-- 是否仅查看有内容评价 -->
        <div @click="toggle" class="switch" :class="{'on': onlyContent}">
            <span class="icon-check_circle"></span>
            <span class="text">只查看有内容的评价</span>
        </div>
    </div>
</template>

<script>
    // 评论类型
    const POSITIVE = 0
    const NEGATIVE = 1
    const ALL = 2
    // 自定义事件
    const EVENT_SELECT = 'select'
    const EVENT_TOGGLE = 'toggle'

    export default {
        name: 'rating-select',
        props: {
            // 所有评论
            ratings: {
                type: Array,
                default() {
                    return []
                }
            },
            // 当前点选的评论类型
            selectType: {
                type: Number,
                default: ALL
            },
            // 是否仅参考有内容评论
            onlyContent: {
                type: Boolean,
                default: false
            },
            // 评价类型描述文案
            desc: {
                type: Object,
                default() {
                    return {
                        all: '全部',
                        positive: '好评',
                        negative: '差评'
                    }
                }
            }
        },
        computed: {
            // 过滤出好评数组
            positives() {
                return this.ratings.filter((rating) => {
                    return rating.rateType === POSITIVE
                })
            },
            // 过滤出差评数组
            negatives() {
                return this.ratings.filter((rating) => {
                    return rating.rateType === NEGATIVE
                })
            }
        },
        methods: {
            // 选择评论类型事件
            select(type) {
                this.$emit(EVENT_SELECT, type)
            },
            // 选择是否仅展示有内容评论事件
            toggle() {
                this.$emit(EVENT_TOGGLE)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~common/stylus/variable"

    .rating-select
        // 评价类型区块
        .rating-type
            padding: 18px 0
            margin: 0 18px
            .block
                display: inline-block
                padding: 8px 12px
                margin-right: 8px
                line-height: 16px
                border-radius: 1px
                font-size: $fontsize-small
                color: $color-grey
                &.active
                    color: $color-white
                // 评论数量
                .count
                    margin-left: 2px
                &.positive
                    background: $color-light-blue
                    &.active
                        background: $color-blue
                &.negative
                    background: $color-light-grey-s
                    &.active
                        background: $color-grey
        // 只参考有内容评价区块
        .switch
            display: flex
            align-items: center
            padding: 12px 18px
            line-height: 24px
            border-bottom: 1px solid $color-row-line
            color: $color-light-grey
            &.on
                .icon-check_circle
                    color: $color-green
            .icon-check_circle
                margin-right: 4px
                font-size: $fontsize-large-xxx
            .text
                font-size: $fontsize-small
</style>
